Passed
Branch development (e0e718)
by Nils
04:45
created

agses.jquery.js ➔ ... ➔ this.init   F

Complexity

Conditions 21
Paths 768

Size

Total Lines 49

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
cc 21
nc 768
nop 1
dl 0
loc 49
rs 2.8539
c 0
b 0
f 0

How to fix   Complexity   

Complexity

Complex classes like agses.jquery.js ➔ ... ➔ this.init often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.

Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.

1
/*
2
*	Agses Flickering - HTML5-CANVAS
3
*	Type: jQuery Plugin
4
*   Author: David Mirk
5
*   Owner: ICSL GmbH 
6
*	Website: www.icsl.at
7
*	Website: www.agses.net
8
*/
9
//jquery wrapper
10
$.fn.agsesInit = function(options) {
11
	if (undefined != $(this).data('agsesFlicker')) {
12
		console.log("AgsesFlicker already initialized, call .agsesFlickerCanvas(message) to change flickercode");
13
	} else {
14
		var agsesFlicker = new AgsesFlicker(this);	
15
		$(this).data('agsesFlicker', agsesFlicker);
16
		$(this).data('agsesFlicker').init(options);
17
	}
18
};
19
20
$.fn.agsesFlicker = function(message) {
21
	if (undefined != $(this).data('agsesFlicker')) 
22
		$(this).data('agsesFlicker').agsesFlickerCanvas(message);
23
	else
24
		console.log("AgsesFlicker not initialized, call .agsesInit(options) first");
25
};
26
27
$.fn.agsesZoom = function(factor) {
28
	if (undefined != $(this).data('agsesFlicker')) 
29
		$(this).data('agsesFlicker').zoomCanvas(factor);
30
	else
31
		console.log("AgsesFlicker not initialized, call .agsesInit(options) first");
32
};
33
34
$.fn.agsesDelay = function(factor) {
35
	if (undefined != $(this).data('agsesFlicker')) 
36
		$(this).data('agsesFlicker').changeDelay(factor);
37
	else
38
		console.log("AgsesFlicker not initialized, call .agsesInit(options) first");
39
};
40
41
$.fn.agsesToggleStyle = function(button) {
42
	if (undefined != $(this).data('agsesFlicker')) 
43
		$(this).data('agsesFlicker').toggleStyle(button);
44
	else
45
		console.log("AgsesFlicker not initialized, call .agsesInit(options) first");
46
};
47
48
//Plugin
49
function AgsesFlicker(canvas) {
50
	this._c = canvas;
51
	this._o;
52
	//setting variables
53
	this.delay = 40;
54
	this.style = 'trapez';
55
	this.colorTrue = "#fff";
56
	this.colorFalse = "#000";	
57
	this.colorBorder = "#B92840";	
58
	this.buttonsPath = "includes/libraries/Authentication/agses/buttons/";
59
60
	this.topX = 80;
61
	this.bottomX = 0;
62
	this.topWidth = 50;
63
	this.bottomWidth = 76;	
64
	this.topY = 10;
65
	this._scale = 1.0;
66
67
	this.baseWidth = 440.0;
68
	this.height = 130.0;
69
70
	//working variables
71
	this.intid;
72
	this.msg;
73
	this.idx;
74
	this.fcnt;
75
	
76
	this.init = function(options) {
77
		var self = this;
78
		self._c = canvas;   
79
		self._o = options;
80
81
		self.baseWidth = self.bottomWidth*self._scale*6;
82
83
		if (!$(self._c).hasClass("agses_canvas"))
84
			$(self._c).addClass("agses_canvas")
85
86
		$(self._c).attr("width", self.baseWidth);
87
88
		if (options.controls == null || options.controls == "undefined" || (options.controls && options.controls === true)) {
89
			self.agsesInjectControls();	
90
		} else {
91
			$(self._c).css("padding-bottom","10px");
92
		}
93
94
		if (options.delay && options.delay > 10)
95
			self.delay = options.delay;
96
97
		if (options.style && options.style != "")
98
			self.changeStyle(options.style);
99
100
		if (options.flickerColor && options.flickerColor != "")
101
			self.colorFalse = options.flickerColor;		
102
103
		if (options.borderColor && options.borderColor != "")
104
			self.colorBorder = options.borderColor;		
105
106
		if (options.height && options.height > 10)
107
			self.height = options.height;
108
109
		if (options.width && options.width > 0) {		
110
			if (options.width != self.baseWidth) {
111
				self._scale = options.width/self.baseWidth;				
112
			}
113
		} else 
114
			self._scale = 460/self.baseWidth;	
115
116
		self.scaleCanvas();
117
118
		if (options.message && options.message != "") 
119
			self.agsesFlickerCanvas(options.message);
120
		else {
121
			self.drawCanvasFlicker([1,1,1,1,1,1]);
122
			self.drawCanvasText("Loading data...");
123
		}
124
	}
125
126
	this.agsesInjectControls = function() {
127
		var self = this;
128
		
129
		var id = $(self._c).attr("id");
130
		var controls = $('<div class="agses_controls" id="'+id+'_controls"></div>');
131
132
		var slowerButton = $('<a onclick="$(\'#'+id+'\').agsesDelay(10);" id="'+id+'_slowerButton"></a>');
133
		$(slowerButton).append('<img src="'+self.buttonsPath+'button_image_slow_enabled.png" alt="" style="border-style: none;">');
134
135
		var fasterButton = $('<a onclick="$(\'#'+id+'\').agsesDelay(-10);" id="'+id+'_fasterButton"></a>');
136
		$(fasterButton).append('<img src="'+self.buttonsPath+'button_image_fast_enabled.png" alt="" style="border-style: none;">');
137
138
		var zoomOutButton = $('<a onclick="$(\'#'+id+'\').agsesZoom(-0.3);" id="'+id+'_zoomInButton" style="margin-left:10px"></a>');
139
		$(zoomOutButton).append('<img src="'+self.buttonsPath+'button_image_zoomout_enabled.png" alt="" style="border-style: none;">');
140
141
		var zoomInButton = $('<a onclick="$(\'#'+id+'\').agsesZoom(0.3);" id="'+id+'_zoomOutButton"></a>');
142
		$(zoomInButton).append('<img src="'+self.buttonsPath+'button_image_zoomin_enabled.png" alt="" style="border-style: none;">');
143
144
		var styleButton = $('<a onclick="$(\'#'+id+'\').agsesToggleStyle(this);" style="float:right" id="'+id+'_styleButton"></a>');
145
		$(styleButton).append('<img src="'+self.buttonsPath+'button_image_bars.png" alt="" style="border-style: none;">');
146
147
		controls.append(slowerButton);
148
		controls.append(fasterButton);	
149
150
		controls.append(zoomOutButton);
151
		controls.append(zoomInButton);	
152
		
153
		controls.append(styleButton);
154
155
		$(controls).css("width",self.baseWidth);
156
		$(self._c).after(controls);
157
	}
158
159
	this.agsesFlickerCanvas = function(message) {
160
		var self = this;
161
		if (self.agsesSetMessageCanvas(message)) 
162
			self.agsesStartFlickeringCanvas();
163
		else {
164
			self.drawCanvasFlicker([1,1,1,1,1,1]);
165
			self.drawCanvasText("Error: Invalid Message");
166
		}
167
	}
168
169
	this.agsesSetMessageCanvas = function(message) {
170
		var self = this;
171
		// --- VARIABLES
172
		var tmpMsg, tmpCnt, codeStr, codeVal, isValid, i;
173
174
		// --- IMPLEMENTATION
175
		isValid = false;
176
		
177
		// message must be non-empty and its length even (2 nibbles per code frame)
178
		if ((message.length > 0) && (message.length % 2 === 0)) {
179
180
			tmpMsg = message.toLowerCase();
181
			tmpCnt = tmpMsg.length / 2;
182
				
183
			// check code string for invalid characters and frame values
184
			isValid = true;
185
			for (i = 0; (i < tmpCnt) && isValid; i++) {
186
				codeStr = tmpMsg.charAt(2*i) + tmpMsg.charAt(2*i+1);
187
				codeVal = parseInt('0x'+codeStr, 16);
188
				isValid = (codeVal >= 0) && (codeVal <= 63);
189
			}
190
			
191
			// if message is valid, assign it to global variables
192
			if (isValid === true) {
193
				self.msg = tmpMsg;
194
				self.fcnt = tmpCnt;
195
				self.idx = 0;
196
			}
197
		}
198
199
		return isValid;
200
	}
201
202
	this.agsesStartFlickeringCanvas = function() {
203
		var self = this;
204
		// make sure flickering isn't already running
205
		self.agsesStopFlickeringCanvas();
206
			
207
		// check if we have something to display
208
		if (self.msg !== '') {
209
			// install timer for next frame
210
			self.intid = window.setTimeout(function() {
211
				self.agsesShowNextFrameCanvas();
212
			}, self.delay);
213
		}
214
	}
215
216
	this.agsesStopFlickeringCanvas = function() {
217
		var self = this;
218
		if (self.intid !== 0) {
219
			window.clearTimeout(self.intid);
220
			self.intid = 0;
221
		}
222
	}
223
224
	this.agsesShowNextFrameCanvas = function() {
225
		var self = this;
226
		// --- VARIABLES
227
		var code = self.msg.charAt(2*self.idx)+self.msg.charAt(2*self.idx+1);
228
229
		self.drawCanvasFlicker(Hex2BinArray(code));
230
231
		// advance position in message
232
		self.idx = ++self.idx % self.fcnt;
233
234
		// rearm timer for next frame		
235
		if (self.intid !== 0) {
236
			window.clearTimeout(self.intid);
237
		}
238
239
		self.intid = window.setTimeout(function() {
240
			self.agsesShowNextFrameCanvas();
241
		}, self.delay);
242
	}
243
244
	this.drawCanvasText = function(text) {
245
		var self = this;
246
		if (self._c == null || self._c == "undefined")
247
			return;
248
249
		var c2 = self._c[0].getContext("2d");
250
251
		c2.fillStyle = self.colorFalse;
252
		c2.font = "20px Arial";
253
		c2.textAlign = "center";
254
		c2.fillText(text,self._c.width()/2,(self._c.height())/2+self.topY+3);
255
	}
256
257
	this.drawCanvasFlicker = function(binFrame) {
258
		var self = this;
259
		if (self._c == null || self._c == "undefined")
260
			return;
261
262
		var c2 = self._c[0].getContext("2d");
263
264
		c2.clearRect(0, 0, c2.canvas.width, c2.canvas.height);		
265
266
		var startBottomX = self.bottomX;
267
		var startTopX = self.topX*self._scale;	
268
		var topWidth = self.topWidth*self._scale;
269
		var bottomWidth = self.bottomWidth*self._scale;
270
		var height = self.height*self._scale;
271
		var lineTopY = (height - self.topY) / 3;
272
273
		self.drawBorders();
274
275
		for(var b in binFrame) {
276
			var bin = binFrame[b];
277
			if (bin == 0)
278
				c2.fillStyle = self.colorFalse;
279
			else
280
				c2.fillStyle = self.colorTrue;
281
282
			c2.beginPath();
283
			c2.moveTo(startTopX, self.topY);
284
			c2.lineTo(startBottomX, height);
285
			c2.lineTo(startBottomX+bottomWidth, height);
286
			c2.lineTo(startTopX+topWidth, self.topY);
287
			c2.closePath();
288
			c2.fill();
289
			
290
			startTopX += topWidth;
291
			startBottomX += bottomWidth;
292
		}		
293
294
		if(self.height > 100 && self.style == "trapez") {
295
			//dotted lines
296
			c2.strokeStyle = "#ccc";
297
			c2.setLineDash([2,2]);
298
			c2.beginPath();
299
			c2.moveTo(self.topX*self._scale-25*self._scale, self.topY+lineTopY);
300
			c2.lineTo(self.topX*self._scale+6*topWidth+25*self._scale, self.topY+lineTopY);
301
			c2.closePath();
302
			c2.stroke();
303
304
			c2.beginPath();
305
			c2.moveTo(self.topX*self._scale-52*self._scale, self.topY+2*lineTopY);
306
			c2.lineTo(self.topX*self._scale+6*topWidth+52*self._scale, self.topY+2*lineTopY);
307
			c2.closePath();
308
			c2.stroke();
309
		}
310
	
311
	}
312
313
	this.drawBorders = function() {
314
		var self = this;
315
		if (self._c == null || self._c == "undefined")
316
			return;
317
318
		var c2 = self._c[0].getContext("2d");
319
320
		var startBottomX = self.bottomX;
321
		var startTopX = self.topX*self._scale;	
322
		var topWidth = self.topWidth*self._scale;
323
		var bottomWidth = self.bottomWidth*self._scale;
324
		var height = self.height*self._scale;
325
326
		if(self.style == "trapez") {
327
			//borders
328
			c2.fillStyle = self.colorBorder;
329
			c2.beginPath();
330
			c2.moveTo(startTopX-10, 0);
331
			c2.lineTo(startBottomX-15, height);
332
			c2.lineTo(startBottomX, height);
333
			c2.lineTo(startTopX+20, 0);
334
			c2.closePath();
335
			c2.fill();
336
337
			c2.beginPath();
338
			c2.moveTo(startTopX+6*topWidth-20, 0);
339
			c2.lineTo(startBottomX+6*bottomWidth, height);
340
			c2.lineTo(startBottomX+6*bottomWidth+15, height);
341
			c2.lineTo(startTopX+6*topWidth+10, 0);
342
			c2.closePath();
343
			c2.fill();
344
		}
345
346
		//little arrows
347
		var offset = 0;
348
		if(self.style == "trapez")
349
			c2.fillStyle = "#fff";
350
		else {
351
			c2.fillStyle = "#000";
352
			offset = 3;
353
		}
354
355
		c2.beginPath();
356
		c2.moveTo(startTopX-2+offset, 3);
357
		c2.lineTo(startTopX+offset, 10);
358
		c2.lineTo(startTopX+4+offset, 3);
359
		c2.closePath();
360
		c2.fill();
361
362
		c2.fillStyle = "#000";
363
		for(var i = 1; i < 6; i++) {
364
			c2.beginPath();
365
			c2.moveTo(startTopX+i*topWidth-2, 3);
366
			c2.lineTo(startTopX+i*topWidth, 10);
367
			c2.lineTo(startTopX+i*topWidth+4, 3);
368
			//c2.lineTo(startTopX+6, 5);
369
			c2.closePath();
370
			c2.fill();
371
		}
372
373
		if(self.style == "trapez")
374
			c2.fillStyle = "#fff";
375
		else
376
			c2.fillStyle = "#000";
377
		c2.beginPath();
378
		c2.moveTo(startTopX+6*topWidth-2-offset, 3);
379
		c2.lineTo(startTopX+6*topWidth-offset, 10);
380
		c2.lineTo(startTopX+6*topWidth+4-offset, 3);
381
		//c2.lineTo(startTopX+6, 5);
382
		c2.closePath();
383
		c2.fill();
384
	}
385
386
	this.scaleCanvas = function() {
387
		var self = this;
388
		if (self._c == null || self._c == "undefined")
389
			return;				
390
391
		var newWidth = parseInt(self.bottomWidth*self._scale*6);
392
		var newHeight = parseInt(self.height*self._scale);
393
394
		self._c.width(newWidth);
395
		$(self._c).attr("width", newWidth);
396
397
		//self.height = newHeight;
398
		self._c.height(newHeight);
399
		$(self._c).attr("height", newHeight);
400
401
		$('#'+$(self._c).attr("id")+'_controls').css("width",("width", newWidth));
402
	}
403
404
	this.zoomCanvas = function(factor) {
405
		var self = this;
406
		if (self._c == null || self._c == "undefined")
407
			return;	
408
409
		var id = $(self._c).attr("id");
410
		var outb = $('#'+id+'_zoomOutButton');
411
		var inb = $('#'+id+'_zoomInButton');
412
413
		if ((self._scale+factor) > 3) {
414
			$(outb).find("img").attr("src",self.buttonsPath+"button_image_zoomin_disabled.png");			
415
			return;
416
		} else {
417
			$(outb).find("img").attr("src",self.buttonsPath+"button_image_zoomin_enabled.png");			
418
		}
419
420
		if ((self._scale+factor) < 0.3) {
421
			$(inb).find("img").attr("src",self.buttonsPath+"button_image_zoomout_disabled.png");
422
			return;
423
		} else {
424
			$(inb).find("img").attr("src",self.buttonsPath+"button_image_zoomout_enabled.png");
425
		}
426
427
		self._scale += factor;		
428
429
		self.scaleCanvas();
430
	}
431
432
	this.changeDelay = function(factor) {
433
		var self = this;
434
		if (self._c == null || self._c == "undefined")
435
			return;	
436
437
		var id = $(self._c).attr("id");
438
		var slb = $('#'+id+'_slowerButton');
439
		var fab = $('#'+id+'_fasterButton');
440
441
		if ((self.delay+factor) < 30) {
442
			$(fab).find("img").attr("src",self.buttonsPath+"button_image_fast_disabled.png");			
443
			return;
444
		} else {
445
			$(fab).find("img").attr("src",self.buttonsPath+"button_image_fast_enabled.png");			
446
		}
447
448
		if ((self.delay+factor) > 100) {
449
			$(slb).find("img").attr("src",self.buttonsPath+"button_image_slow_disabled.png");
450
			return;
451
		} else {
452
			$(slb).find("img").attr("src",self.buttonsPath+"button_image_slow_enabled.png");
453
		}
454
455
		self.delay += factor;
456
	}
457
458
	this.changeStyle = function(style) {
459
		var self = this;
460
		self.style = style;
461
462
		var id = $(self._c).attr("id");
463
		var stb = $('#'+id+'_styleButton');
464
465
		if (self.style == "bars") {
466
			self.topX = 0;
467
			self.bottomX = 0;
468
			self.topWidth = 76;
469
			self.bottomWidth = 76;
470
			$(stb).find("img").attr("src",self.buttonsPath+"button_image_trapez.png");
471
		} else if (self.style=="trapez") {
472
			self.topX = 80;
473
			self.bottomX = 0;
474
			self.topWidth = 50;
475
			self.bottomWidth = 76;
476
			$(stb).find("img").attr("src",self.buttonsPath+"button_image_bars.png");
477
		}	
478
	}
479
480
	this.toggleStyle = function(button) {
481
		var self = this;
482
		if (self.style == "bars") {
483
			self.changeStyle("trapez");		
484
		} else if (self.style=="trapez") {
485
			self.changeStyle("bars");		
486
		}		
487
	}
488
}
489
490
//Useful Functions
491
function checkHex(n){return/^[0-9A-Fa-f]{1,64}$/.test(n)}
492
function Hex2Bin(n){if(!checkHex(n))return 0;return parseInt(n,16).toString(2)}
493
function Hex2BinArray(n) {var tempBin = padZero(""+Hex2Bin(n),6,0);return [...tempBin];}
494
function padZero(str, len, c){var s= str, c= c || '0';while(s.length< len) {s= c+ s}; return s;}